<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style type="text/css">
        body{
            background-color:#DCDCDC;
        }
        #zzbq{
            text-align: center;
            margin:0 auto;
            margin-top: 3%;
            width:800px; height:10px;

        }
        #zzbq a{ text-decoration:none }
        #github{
            margin:0 auto;
            padding-left: 3%;
            width:800px; height:0px;
        }
        #github a{ font-weight: bold;text-decoration:none; }
        #main{
            margin: auto;
            margin-top: 3%;
            width:800px; height:600px;
            border: 0px solid red;
        }
    </style>

    <!-- 1.引入 echarts.js -->
    <script src="echarts4.2.js"></script>
</head>
<body>

    <div id='zzbq'>
        <span style='font-weight: bold;'>其他图：</span>
        <a href="index.html">柱+折线图</a>
        <a href="../echarts3_pie/index.html">饼图</a>
        <a href="../echarts3_map_China/index.html">迁徙图</a>
        <a href="../echarts3_map_baiduApi/index.html">接入百度地图</a>
        
    </div>

    <div id='github'>
        <a href="https://github.com/zpj80231/EChartsStudy">github源码</a>
    </div>

    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main"></div>
    
    <script type="text/javascript">
        // 3.基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        
// 4.指定图表的配置项和数据  【option这部分最主要】      
var option = {
    //图表颜色
    color: ['#FA4647', '#00B093'],
    //标题
    title: {
        //top:'5%',
		//left: 'left',
        text: 'ECharts 入门示例',
        subtext: '点我去百度',
        sublink: 'http://www.baidu.com',
        textStyle:{
            fontSize :'14',
            color:'#999'
        }
    },
    //工具栏组件
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    //提示栏组件
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function(params) {
        	var resultDCL = '';
        	var resultYCL = '';
        	var provinceName = "";
            params.forEach(function (item) {
                console.log(item);
            	if(provinceName===''){
            		provinceName = item.name;
            	}
            	var cou = 0;
            	var data = null;
            	var index = item.dataIndex;
            	if(item.seriesName=='流行趋势'){
            		//data = item.value;
            		//cou = data[index].cou;
                    resultYCL += item.marker + " " + item.seriesName + " : " + item.value +"%("+cou+")</br>";
            	}else {
            		//data = item.value;
            		resultDCL += item.marker + " " + item.seriesName + " : " + item.value +"万("+cou+")</br>";
            	}

            });

            return provinceName+"<br/>"+resultDCL+resultYCL;
        }
    },
    //调整图标定位/大小
     grid: {
	        top: '10%',
	        left: '3%',
	        right: '8%',
	        bottom: '8%',
	        containLabel: true
	  },
	//顶部按钮
    legend: {
        data:['销量','流行趋势'],
        selected: {
                    '销量': true, '流行趋势': true
                }
    },

    //x轴数据
    xAxis: [
        {
            type: 'category', //声明一个 X 轴，类目轴(category)
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
            /*axisLabel: {
                interval:0,
                rotate:10
            }*/
        }
    ],
    //y轴数据
    yAxis: [
        {
	        type: 'value',
	       /* axisLabel: {
		       formatter: '{value}%'
		    }*/
	    }
    ],
    //图表标对应的数值
    series: [
    {
        name: '销量',
        type: 'bar',//line,pie
        stack: '销量',//加stack多列变为1列
        //barWidth: 20, //设置柱宽度
        data: [5, 20, 36, 10, 10, 20],
        itemStyle: {
            normal: {
                label: {
                    show: true,//在柱图上显示详细数值
                    position: 'insideLeft'//insideRight
                }
            }
        }
    },{
        name: '流行趋势',
        type: 'line',//折线图
        smooth: true,//折线还是曲线
        stack: '流行趋势',
        data: [53, 25, 26, 20, -12, 25],
        itemStyle: {
            normal: {
                label: {
                    show: true,//在柱图上显示详细数值
                    position: 'insideRight',//top
                    //formatter: '{c}%',
                    formatter: function (params) {
                        //如果值大于0 正常显示，否则不显示
                        if (params.value > 10) {	
                            return params.value+"%";
                        } else {
                            return params.value+"%";
                        }
                    }
                }
            }
        }
    }],
    //缩放大小
    dataZoom: [
        {
            type: 'slider',//slider表示有滑动块的，inside表示无滑块的
            xAxisIndex: 0,
            filterMode: 'empty'
        },
        {
            type: 'slider',
            yAxisIndex: 0,
            filterMode: 'empty'
        },
        {
            type: 'inside',
            xAxisIndex: 0,
            filterMode: 'empty'
        },
        {
            type: 'inside',
            yAxisIndex: 0,
            filterMode: 'empty'
        }
    ],

};
        
//轮流显示事件
/*app.currentIndex = -1;
setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    app.currentIndex = (app.currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
    // 显示 tooltip
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: app.currentIndex
    });
}, 1000);*/

        
        // 5.使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
		</script>
    
</body>
</html>